<template>
	<view class="my">
		<view class="userBg">
			<view class="titleBox">
				<view class="infor">
					<view class="userAvatarUrl">
						<open-data type="userAvatarUrl"></open-data>
					</view>
					<view>
						<open-data type="userNickName"></open-data>
					</view>
				</view>
			</view>
			<view class="bgImg">
				<image src="../../../static/img/bj.jpg" alt=""></image>
			</view>
		</view>
		<!-- <button type="default" open-type="getUserInfo" @getuserinfo="loginWechat" class="loginWechatBtn">微信授权一键登录</button> -->
		<view class="bgColor" ref="homePage">
			<view class="myOrder">
				<p class="order">
					我的订单
					<span @click="goOrderList(0)">
						查看全部订单
						<image src="../../../static/img/gengduo.png" mode=""></image>
					</span>
				</p>

				<view class="orderList">
					<view @click="goOrderList(1)" class="item">
						<image src="../../../static/img/payment.png" mode=""></image>
						<p>待付款</p>
						<b v-if="quantity.toBePay > 0" class="number" v-text="quantity.toBePay"></b>
					</view>
					<view @click="goOrderList(3)" class="item">
						<image src="../../../static/img/fahuo.png" mode=""></image>
						<p>待发货</p>
						<b v-if="quantity.toBeShip > 0" class="number" v-text="quantity.toBeShip"></b>
					</view>
					<view @click="goOrderList(4)" class="item">
						<image src="../../../static/img/received.png" mode=""></image>
						<p>待收货</p>
						<b v-if="quantity.toBeReceipt > 0" class="number" v-text="quantity.toBeReceipt"></b>
					</view>
					<view @click="goOrderList(5)" class="item">
						<image src="../../../static/img/wanc.png" mode=""></image>
						<p>已完成</p>
					</view>
				</view>
			</view>
			<view class='myOrder function'>
				<p class='order'>常用功能</p>

				<view class='orderList'>
					<view class="item">
						<button type="default" open-type="contact" class="contactUs">
							<image src="../../../static/img/service.png" mode=""></image>
							<p>联系客服</p>
						</button>
					</view>
					<view @click='goPartner' class="item" v-if="inviter">
						<button type="default" class="contactUs">
							<image src="../../../static/img/parter.png" mode=""></image>
							<p>我的团队</p>
						</button>
					</view>
					<view @click='openMyCode' class="item" v-if="inviter">
						<button type="default" class="contactUs">
							<image src="../../../static/img/code.png" mode=""></image>
							<p>我的名片</p>
						</button>
					</view>
					<view @click='goGroupData' class="item" v-if="inviter">
						<button type="default" class="contactUs">
							<image src="../../../static/img/data.png" mode=""></image>
							<p>拼团数据</p>
						</button>
					</view>
				</view>
			</view>
			<!-- <view class="support">
				技术支持：成都云汀科技
			</view> -->
		</view>
		<uni-popup :show="type === 'middle'" position="middle" mode="fixed" @hidePopup="togglePopup('')">
			<button type="default" open-type="getUserInfo" @getuserinfo="loginWechat"
				class="loginWechatBtn">微信授权一键登录</button>
			<!-- <button type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">获取手机号</button> -->
		</uni-popup>
		<!-- //下載我的二維碼-->
		<view class="confirmPopup" v-if="showPopup">
			<view class="content">
				<canvas canvas-id="mycanvas" id="mycanvas"
					style="border: 1px solid; background: white;width: 200px; height: 200px;" />
				<view class="btnWrap">
					<button size="small" type="default" @click="showPopup = false" class="downloadBtn close">关闭</button>
					<button type="warn" @click="download" class="downloadBtn">下载二维码</button>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import API from '@/common/api';
	import utils from '@/common/utils';
	import uniPopup from '@/pages/components/uni-popup/uni-popup.vue';
	export default {
		data() {
			return {
				title: '我的',
				userId: '',
				inviter: false,
				user: {
					name: '',
					avatarUrl: ''
				},
				type: '',
				qrCodeUrl: '',
				quantity: "",
				showLoginPopup: false,
				showPopup: false,
				params: {},
				drawSuccess: false
			};
		},
		components: {
			uniPopup
		},
		onShow() {
			this.loginInfo()
		},
		onLoad() {},
		onShareAppMessage() {
			return {
				title: this.title,
				path: '/pages/tabbar/homePage/index?scene=' + uni.getStorageSync('uid')
			}
		},
		onShareTimeline() {
			return {
				title: this.title,
				path: '/pages/tabbar/homePage/index?scene=' + uni.getStorageSync('uid')
			}
		},
		methods: {
			togglePopup(type) {
				this.type = type;
			},
			callService() {

			},
			goPartner() {
				const value = uni.getStorageSync('token');
				if (value) {
					uni.navigateTo({
						url: './partnerList'
					});
				} else {
					this.togglePopup('middle');
				}
			},
			goGroupData() {
				const value = uni.getStorageSync('token');
				if (value) {
					uni.navigateTo({
						url: './groupData'
					});
				} else {
					this.togglePopup('middle');
				}
			},
			openMyCode() {
				const value = uni.getStorageSync('token');
				if (value) {
					this.showPopup = true
					uni.showLoading({
						title: '正在生成分享码...',
						mask: true
					})
					console.log('downloadFile:', this.qrCodeUrl)
					uni.downloadFile({
						url: this.qrCodeUrl, //仅为示例，并非真实的资源
						success: (res) => {
							console.log(res)
							if (res.statusCode === 200) {
								console.log('下载成功');
								const myCanvas = uni.createCanvasContext('mycanvas', this);
								console.log(myCanvas);
								myCanvas.clearRect(0, 0, 200, 200)
								myCanvas.setFillStyle('white')
								myCanvas.fillRect(0, 0, 200, 200)
								myCanvas.setFillStyle('black')
								myCanvas.setFontSize(14)
								myCanvas.fillText('玖玖优拼～趣味乐购', 40, 30)
								myCanvas.drawImage(res.tempFilePath, 30, 50, 146, 146);
								myCanvas.draw()
								//this.drawSuccess = true
							}
							uni.hideLoading()
						}
					});
				} else {
					this.togglePopup('middle');
				}
			},
			goOrderList(num) {
				const value = uni.getStorageSync('token');
				if (value) {
					uni.navigateTo({
						url: './orderList?tabIndex=' + num + '&userId=' + this.userId
					});
				} else {
					console.log("弹框显示");
					this.togglePopup('middle');
				}
			},

			async loginInfo() {
				const json = await API.loginInfo();
				if (json.code == 200) {
					this.userId = json.data.id
					this.inviter = json.data.inviter
					this.qrCodeUrl = API.baseHost + "files/stream?fileName=" + encodeURIComponent(json.data
						.shareQrFile)
				}
			},

			async loadUserDetail() {
				const json = await API.userDetail({
					targetId: this.user.id
				});
				if (json.code == 200) {
					console.log(json, "userDetail");
				}
			},
			download() {
				uni.showLoading({
					title: '下载中...',
					mask: true
				})
				uni.canvasToTempFilePath({
					canvasId: 'mycanvas',
					success: (res) => {
					console.log(res, "canvasToTempFilePath");
						// 在H5平台下，tempFilePath 为 base64
						var tempFilePath = res.tempFilePath;
						uni.saveImageToPhotosAlbum({ // 然后调用这个方法
							filePath: tempFilePath,
							success: (res) => {
								uni.hideLoading();
								uni.showToast({
									title: '图片已保存'
								})
								this.showPopup = false
							}
						})
						uni.hideLoading();
					},
					fail: () => {
						uni.showToast({
							title: '名片下载失败',
							duration: 2000
						});
						uni.hideLoading();
					}
				});

				// uni.downloadFile({
				// 	url: this.qrCodeUrl, // 这里是你接口地址 若要传参 直接 url拼接参数即可
				// 	header: {
				// 		'X-Authorization': uni.getStorageSync('session.login')['token']
				// 	},
				// 	methods: 'GET',
				// 	success: (res) => {
				// 		console.log(res, 'res')
				// 		var tempFilePath = res.tempFilePath; // 这里拿到后端返回的图片路径
				// 		uni.saveImageToPhotosAlbum({ // 然后调用这个方法
				// 			filePath: tempFilePath,
				// 			success: (res) => {
				// 				uni.hideLoading();
				// 				uni.showToast({
				// 					title: '图片已保存'
				// 				})
				// 				this.showPopup = false
				// 			}
				// 		})
				// 		uni.hideLoading();
				// 	},
				// 	fail: () => {
				// 		uni.hideLoading();
				// 	}
				// });
			},
			//一键登录获取用户信息
			loginWechat(callback) {
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						console.log(loginRes, 'uni.login');
						uni.getUserInfo({
							provider: 'weixin',
							success: infoRes => {
								console.log(infoRes, 'getUserInfo')
								//1小程序登录 waLogin
								this.params.jsCode = loginRes.code;
								this.params.avatar = infoRes.userInfo.avatarUrl;
								this.params.gender = infoRes.userInfo.gender === 2 ? 'female' :
									'male';
								this.params.name = infoRes.userInfo.nickName;
								this.params.encryptedData = infoRes.encryptedData;
								this.params.iv = infoRes.iv;
								this.params.inviteUserId = uni.getStorageSync('scene');
								API.waLogin(this.params).then(res => {
									console.log(res, '登录成功');
									uni.setStorageSync('token', res.data.token);
									uni.setStorageSync('uid', res.data.id);
									this.togglePopup('close');
									console.log("弹框关闭");
									this.loginInfo()
								});
							}
						});
					}
				});
			}
		}
	};
</script>
<style>
	.my .function .orderList button{
		padding: 0 !important;
	}
</style>
<style lang="less">
	.my {
		position: relative;
		height: auto;

		.userBg {
			position: relative;
			height: 180px;

			.titleBox {
				width: 100%;
				height: 100%;
				z-index: 3;
			}

			.bgImg {
				width: 100%;
				height: 180px;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.infor {
				display: flex;
				margin-top: 40px;
				z-index: 11;
				position: absolute;
				width: 100%;

				.userAvatarUrl {
					overflow: hidden;
					display: block;
					width: 70px;
					height: 70px;
					margin-left: 1rem;
					border-radius: 100%;
					border: 2px solid #fff;
					box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
				}

				view:last-child {
					text-align: left;
					padding: 0.3rem 0 0 1rem;

					p {
						margin: 0;
						font-size: 22px;
						color: #333;

						.gengduoSecond {
							width: 20px;
							height: 20px;
						}
					}
				}
			}

		}

		.bgColor {
			padding-top: 1rem;
			background: #f5f5f5;
			height: 100%;

			.myOrder {
				background: #fff;
				padding-bottom: 0.4rem;
				border-radius: 10px;
				width: 93%;
				margin: 0 auto 1rem auto;

				.order {
					margin: 0;
					font-size: 16px;
					color: rgba(16, 16, 16, 1);
					padding: 0.5rem 1rem;
					border-bottom: 1px solid #ececec;
					text-align: left;

					span {
						color: rgba(142, 142, 142, 1);
						font-size: 13px;
						float: right;
						margin-top: 0.1rem;
						display: flex;
						justify-content: center;

						image {
							width: 15px;
							height: 15px;
						}
					}
				}

				.orderList {
					display: flex;
					width: 100%;
					margin-top: 14px;

					.item {
						width: 25%;
						display: flex;
						flex-direction: column;
						align-items: center;
						position: relative;

						image {
							width: 29px;
							height: 29px;
						}

						.number {
							display: block;
							border: 1px solid #0796fa;
							color: #0796fa;
							left: 67%;
							top: -0.5em;
							font-size: 12px;
							font-weight: 400;
							min-width: 1rem;
							min-height: 1rem;
							text-align: center;
							position: absolute;
							border-radius: 50%;
						}

						p {
							color: rgba(96, 95, 95, 1);
							font-size: 12px;
							margin: 0.3rem 0;
						}
					}
				}


			}

			.function {
				.orderList {
					.contactUs {
						display: flex;
						flex-direction: column;
						align-items: center;
						background: white;
						border: none;
						font-size: 14px;
						color: #605f5f;
					}

					.contactUs::after {
						border: none;
					}
				}
			}

			.support {
				color: gray;
				font-size: 12px;
				text-align: center;
			}
		}



		.loginWechatBtn {
			background: dodgerblue;
			color: white;
		}

		.uni-popup-middle {
			width: 70%;
		}

		.uni-popup-middle.uni-popup-fixed {
			padding: 30px 20px;
		}

		.loginWechatBtn {
			padding-left: 36px;
			padding-right: 36px;
		}

		.confirmPopup {
			position: fixed;
			z-index: 998;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.9);
			display: flex;
			align-items: center;

			.content {
				border-radius: 20upx;
				position: fixed;
				display: flex;
				flex-direction: column;
				// background: white;
				left: 0;
				right: 0;
				// bottom: 0;
				width: 80%;
				margin: 0 auto;
				align-items: center;

				.zanImg {
					width: 200px;
					height: 200px;
					position: absolute;
					border: 1px solid red;
					// background: #C94E00;
					opacity: 1;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					animation: change 0.5s;
					-moz-animation: change 0.5s;
					-webkit-animation: change 0.5s;
					-o-animation: change 0.5s;
				}

				.btnWrap {
					width: 240px;
					display: flex;
					position: fixed;
					bottom: 15vh;

					.downloadBtn {
						width: 100px;
						font-size: 14px;
					}

					.close {
						background: gray;
						color: white;
					}
				}

			}
		}
	}
</style>
